<template>
	<view class="my-pages">
		<!-- 没有登陆显示 -->
		<view
			class="no-login"
			v-if="!loginStatus"
		>
			<span>当前没有登陆</span>
			<u-button @click="goToLogin">点击登录</u-button>
		</view>
		<!-- 没有登陆结束 -->

		<!-- 登录了 -->
		<view
			class="my-page"
			v-else
		>
			<view
				class="user-infos"
				@click="gotoMyPages"
			>
				<userInfoVue
					:username="userInfo.username"
					:avatar="userInfo.avatar"
					:followersCount="userInfo.followersCount"
					:followingCount="userInfo.followingCount"
					:posts="userInfo.posts"
					:totalLikes="userInfo.totalLikes"
				></userInfoVue>
			</view>
			<blockVue
				:blockArray="blockArray"
				:blockTitle="blockTitle"
			></blockVue>

			<MyAppsblockVue
				:myAppsblockArray="myAppsblockArray"
				:myAppsblockTitle="myAppsblockTitle"
			></MyAppsblockVue>

			<!-- 退出登录 -->
			<u-button
				type="warning"
				:plain="true"
				text="退出登录"
				style="width: 80%"
				@click="outLogin"
			></u-button>
		</view>
		<!-- 登录了结束 -->
	</view>
</template>

<script>
import config from '../../common/config/myPageConfig';
import blockVue from '../../components/my/block/block.vue';
import MyAppsblockVue from '../../components/my/block/MyAppsblock.vue';
import userInfoVue from '../../components/my/userInfo/userInfo.vue';
import { mapState, mapMutations } from 'vuex';
import { getUserInfo, getUserCardList } from '../../common/api/find.js';

export default {
	data() {
		return {
			blockArray: config.serverBlock.serverBlockArray,
			blockTitle: config.serverBlock.blockTitle,
			myAppsblockArray: config.myApps.myAppsArray,
			myAppsblockTitle: config.myApps.myAppsTitle,
			userInfo: {}
		};
	},
	components: {
		userInfoVue,
		blockVue,
		MyAppsblockVue
	},
	computed: {
		...mapState({
			loginStatus: (state) => state.user.loginStatus,
			userInfos: (state) => state.user.userInfo
		})
	},
	methods: {
		...mapMutations(['loginOut']),
		gotoMyPages() {
			uni.navigateTo({
				url: '/pages/myCenter/myCenter'
			});
		},
		goToLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		outLogin() {
			this.loginOut();
			uni.navigateTo({
				url: '/pages/index/index'
			});
		},
		getUserInfo() {
			const that = this;
			const uid = this.userInfos.uid;
			const _id = this.userInfos.id;
			const query = ['avatar', 'profileBackground', 'followersCount', 'followingCount', 'totalLikes', 'username', 'personSignature', 'posts'];
			getUserInfo(uid, query)
				.then((responseData) => {
					responseData.followingCount = responseData.followingCount.length;
					responseData.posts = responseData.posts.length;
					this.userInfo = responseData;
				})
				.catch((error) => {
					console.error('获取用户信息失败,', error);
				});
		}
	},
	mounted() {
		// console.log(config.serverBlock);
		console.log(this.userInfo);
		this.getUserInfo();
	}
};
</script>

<style>
page {
	background-color: rgb(248, 248, 248);
}
.no-login {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
</style>
